/**
 * 异常考勤页面
 * @time 2017年11月6日15:33:44
 * @author 罗涛
 */
'use strict';
import React, {Component, PropTypes} from 'react';
import ReactDOM, {render} from 'react-dom';
import Header from './Common/Header';
import {HttpService, Toast}  from'../Http';
import {
    Link
} from 'react-router'
import {
    newsStatus,
    imgOnError,
    getNowFormatDate
} from '../Tool';

import touxiang from '../../src/img/touxiang.png'
import noAttendance from '../../src/img/attendance/noAttendance.png'
import phone_gray from '../../src/img/attendance/phone_gray.png'
import phone from '../../src/img/attendance/phone.png'
export default class ExceptionAtt extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            listData: [],
            isLoad: false
        };
    }
    /**
     * 获取学生考勤列表
     */
    componentWillMount() {
        HttpService.query({
            url: '/teacherapp/student/getAttendanceList',
            data: {
                token: localStorage.appToken,
                date: getNowFormatDate('yyyy-MM-dd')
            },
            success: (res => {
                if (res.code == "20020") {
                    this.setState({
                        listData: res.data,
                        isLoad: true
                    });
                    return
                }else{
                    Toast.toast(res.msg);
                }
            })
        })
    }
    render() {
        let {listData,isLoad} = this.state,isExcep = false;
        let listDataHtml = listData.map((data, index) => {
            let type = '无';
            if(data.isabsence|| data.isleftearly|| data.iscomelate|| data.isexception){
                type = '异常';
                isExcep = true;
            }
            return(
                type == '异常'?
                    <Link to={'/kaoqinAtt/'+data.realname+'/'+data.studentid} className="student-info">
                        <img className="left-img" onError={imgOnError.bind(this,touxiang)} src={'/media'+data.headimg}/>
                        <div className="centent">
                            <div className="title">{data.realname}</div>
                            <div className="info">考勤状态：{type}</div>
                        </div>
                        {
                            data.devicetype == '2'?
                                <a href={'tel:'+data.telephone} className="phone">
                                    <img className="right-img" src={phone}/>
                                    <div >电话</div>
                                </a>
                                :
                                <span className="phone">
                                <img className="right-img" src={phone_gray}/>
                                <div >电话</div>
                            </span>
                        }
                    </Link>
                :''
            )
        });
        return (
            <div className="exceptionAtt">
                <Header title='异常考勤' left="1" />
                {
                    isLoad==true?isExcep==false?
                        <div className="exceptionAtt-no-data">
                            <img src={noAttendance} />
                        </div>
                        :
                        <div className="dataList-attendance">
                            {listDataHtml}
                        </div>
                    :
                        ''
                }
            </div>
        )
    }
}
